/* eslint-disable react/prop-types */
import {useState,useEffect} from 'react'
// 组件的传参:父传子,子接收参数用props
function Stepper(props) {
  // 定义state值是num,设置num的方法 setNum
  // num的默认值来自父组件的传参value  
  const [num,setNum] = useState(props.value)
  // 监听num变化执行props的onChange函数  
  useEffect(()=>{
    // 子传父通过执行props回调函数实现
    props.onChange(num);
  },[num])
  return ( <div>
    <button onClick={()=>setNum(num+props.step*-1)}>-</button>
    <input value={num} onChange={e=>setNum(Number(e.target.value))}/>
    <button onClick={()=>setNum(num+props.step)}>+</button>
  </div> );
}

export default Stepper;
// props:父亲传递过来的参数(只读)
// value 默认值,max最大值,min最小值 step进度值
// state:自身的状态(可改变)
// num:1
// 方法
// 设置Stepper的默认传参
Stepper.defaultProps={
  value:1,//默认value值
  step:1,//默认的步长值
  onChange:num=>{
    console.log(num)
  }
}